<template>
  <div>
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>到家首页配置</el-breadcrumb-item>
        <el-breadcrumb-item>金刚区配置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center" style="padding-top: 0px;">
      <div class="hander">金刚区配置</div>
      <!--  员工列表栏位-->
      <div class="entirety">
        <el-table :data="tableData" style="width: 100%;">
          <el-table-column prop="classifyCode" label="一级分组编号">
            <template slot-scope="scope">
              <div>
                {{ scope.row.classifyCode }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="图片">
            <template slot-scope="scope">
              <div>
                <img
                  :src="scope.row.materialIcon"
                  alt=""
                  style="width:50px;height:50px;border: 1px solid #c0c0c0;"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="materialName" label="名称">
            <template slot-scope="scope">
              <div>
                {{ scope.row.materialName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="areaInterval" label="关联分组">
            <template slot-scope="scope">
              <div>
                {{ scope.row.materialContent }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="materialStatus" label="状态">
            <template slot-scope="scope">
              <div>
                {{ scope.row.materialStatus == 1 ? "上架" : "下架" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="platformType" label="显示顺序">
            <template slot-scope="scope">
              <div>
                {{ scope.row.sort }}
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="isDialog(scope.row)"
                style="color: #fc9e76;"
                type="text"
                size="small"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 金刚区dialog -->
        <el-dialog
          title="金刚区修改"
          :visible.sync="dialogFormVisible"
          center
          width="35%"
        >
          <el-form :model="form">
            <el-form-item label="展示图片">
              <el-upload
                class="avatar-uploader"
                action="https://api.xstarlife.com/systemadmin/materialLibrary/upload/materialLibraryMultiFileUpload?uploadScene=activity"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="form.materialIcon"
                  :src="form.materialIcon"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="标题名称">
              <el-input
                v-model="form.materialName"
                autocomplete="off"
                maxlength="10"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item label="副标题">
              <el-input
                v-model="form.materialSubName"
                autocomplete="off"
                maxlength="10"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item label="展示顺序">
              <el-select v-model="form.sort" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关联分组">
              <el-select v-model="form.classifyCode" placeholder="请选择">
                <el-option
                  v-for="item in inquireoptions"
                  :key="item.classifyCode"
                  :label="item.classifyName"
                  :value="item.classifyCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="适用端">
              <el-select v-model="form.platformTypeCode" placeholder="请选择">
                <el-option
                  v-for="item in demandoptions"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-radio v-model="form.materialStatus" :label="1"
                >前端展示</el-radio
              >
              <el-radio v-model="form.materialStatus" :label="2"
                >前端隐藏</el-radio
              >
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button
              style="background-color:#fd804c;color: #fff;"
              @click="isSubmit"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <div class="block">
          <div class="left"></div>
          <div class="right">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-size="pageSize"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: 20,
      total: 0,
      dialogFormVisible: false,
      tableData: [],
      form: {},
      options: [
        { value: "1", label: "1" },
        { value: "2", label: "2" },
        { value: "3", label: "3" },
        { value: "4", label: "4" },
        { value: "5", label: "5" },
        { value: "6", label: "6" },
        { value: "7", label: "7" },
        { value: "8", label: "8" },
        { value: "9", label: "9" },
        { value: "10", label: "10" }
      ],
      inquireoptions: [],
      demandoptions: []
    };
  },
  activated() {
    this.DetailByPage();
    this.inquire();
    this.demand();
  },
  methods: {
    //列表
    DetailByPage() {
      this.$http({
        url: `/cmsadmin/homeService/config/index/V2/fetchMaterialByPositionId`,
        method: "get",
        params: {
          "bannerConfigListRequest.page": this.pageIndex,
          "bannerConfigListRequest.size": this.pageSize,
          "cmsGoodsInfoConfigListRequest.page": this.pageIndex,
          "cmsGoodsInfoConfigListRequest.size": this.pageSize,
          positionType: "96",
          positionId: this.$route.query.positionId
        }
      }).then(res => {
        console.log("列表", res.data.cmsKingKongConfigLists);
        this.tableData = res.data.cmsKingKongConfigLists;
        this.total = res.data.cmsKingKongConfigLists.length;
      });
    },
    //修改
    isDialog(e) {
      this.form = e;
      this.dialogFormVisible = true;
    },
    isSubmit() {
      this.$http({
        url: "/cmsadmin/homeService/config/index/V2/addOrUpdateMaterial",
        method: "post",
        data: {
          cmsInsertKingKongConfigRequest: {
            id: this.form.id,
            materialIcon: this.form.materialIcon,
            sort: this.form.sort,
            materialContent: this.form.classifyCode, //分组
            materialName: this.form.materialName, //标题
            materialStatus: this.form.materialStatus, //状态
            materialSubName: this.form.materialSubName, //副标题
            platformTypeCode: this.form.platformTypeCode //适用端
          },
          positionType: "96"
        }
      }).then(res => {
        // console.log(res, '修改')
        this.dialogFormVisible = false;
        this.$message.success("修改成功");
        this.DetailByPage();
      });
    },
    //查询分组
    inquire() {
      this.$http({
        url: "/cmsadmin/homeService/config/index/V2/getAllGoodsOneClassify",
        method: "get"
      }).then(res => {
        console.log(res.data, "查询分组");
        this.inquireoptions = res.data;
      });
    },
    //查询适用端
    demand() {
      this.$http({
        url: "/cmsadmin/homeService/config/index/V2/selectPltfmTypeList",
        method: "get"
      }).then(res => {
        console.log(res.data, "查询适用端");
        this.demandoptions = res.data;
      });
    },
    //图片
    handleAvatarSuccess(res) {
      this.form.materialIcon = Object.keys(res).toString();
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.DetailByPage();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.DetailByPage();
    }
  }
};
</script>
<style scoped lang="scss">
.hander {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 900;
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.news {
  margin-left: 38%;
}
.entirety {
  width: 95%;
  margin: 10px;
  border: 10px solid #ebeef1;
  border-radius: 10px;
}
/deep/ .demo-input-suffix {
  margin-left: 1%;
}
/deep/ .el-pagination {
  padding: 10px;
}
/deep/ .el-input {
  width: 270px;
}
/deep/ .el-form-item__label {
  width: 80px;
}
/deep/ .el-pagination__editor {
  width: 55px;
}
.avatar-uploader-icon {
  font-size: 28px;
  border: 1px solid #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
</style>
